<template>
  <el-dialog
    v-model="visible"
    width="800px"
    :close-on-click-modal="false"
    append-to-body
    class="unified-dialog detail-dialog-simple"
  >
    <template #header>
      <DialogHeader
        icon="View"
        title="简单详情示例"
        description="使用 el-descriptions 直接展示，适用于字段较少、信息扁平的场景"
        type="primary"
      />
    </template>
    
    <div v-if="data" class="dialog-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="ID">{{ data.id }}</el-descriptions-item>
        <el-descriptions-item label="名称">
          <el-tag type="primary" size="small">{{ data.topic_name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="分区ID">{{ data.partition_id }}</el-descriptions-item>
        <el-descriptions-item label="最新Offset">
          <el-tag type="info" size="small">{{ data.latest_offset }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="消费滞后">
          <el-tag 
            :type="data.consumer_lag > 1000 ? 'danger' : data.consumer_lag > 100 ? 'warning' : 'success'" 
            size="small"
          >
            {{ data.consumer_lag }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="监控状态">
          <el-tag :type="data.is_monitored ? 'success' : 'info'" size="small">
            {{ data.is_monitored ? '已启用' : '已禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="告警启用">
          <el-tag :type="data.is_alert_enabled ? 'success' : 'info'" size="small">
            {{ data.is_alert_enabled ? '已启用' : '已禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(data.status)" size="small">
            {{ getStatusText(data.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="告警状态">
          <el-tag :type="getAlertStatusType(data.alert_status)" size="small">
            {{ getAlertStatusText(data.alert_status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="告警阈值">{{ data.alert_threshold_hours }} 小时</el-descriptions-item>
        <el-descriptions-item label="最新消息时间">{{ data.message_timestamp || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ data.created_at || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import DialogHeader from '@/components/DialogHeader.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleClose = () => {
  visible.value = false
}

const getStatusType = (status) => {
  const typeMap = {
    'active': 'success',
    'inactive': 'info',
    'monitored_only': 'warning'
  }
  return typeMap[status] || 'info'
}

const getStatusText = (status) => {
  const textMap = {
    'active': '活跃',
    'inactive': '非活跃',
    'monitored_only': '仅监控'
  }
  return textMap[status] || status
}

const getAlertStatusType = (status) => {
  const typeMap = {
    'normal': 'success',
    'alerting': 'danger'
  }
  return typeMap[status] || 'info'
}

const getAlertStatusText = (status) => {
  const textMap = {
    'normal': '正常',
    'alerting': '告警中'
  }
  return textMap[status] || status
}
</script>

<style scoped>
.detail-dialog-simple {
  /* 使用统一的对话框样式系统 */
}
</style>

